<template>
    <div class="cascader-component">
        <div class="cascader-cover" v-if="isDrop" @click.stop="toggleDrop">
        </div>
        <div class="cascader-show" @click.stop="toggleDrop">
            <span>
                {{selectAddr}}
            </span>
            <div class="arrow">
            </div>
        </div>
        <transition name="fade">
            <div class="cascader-list" v-if="isDrop">
                <ul>
                    <li v-for="(item,index) in provinces" @click="selectProvince(item,index)" :class="{active:index===nowPIndex}">
                        {{item.name}}
                    </li>
                </ul>
                <ul class="cascader-list-city">
                    <li v-for="(item,index) in citys" @click="selectCity(item,index)" :class="{active:index===nowCIndex}">
                        {{item.name}}
                    </li>
                </ul>
                <ul class="cascader-list-county">
                    <li v-for="(item,index) in countys" @click="selectCounty(item,index)" :class="{active:index===nowCountyIndex}">
                        {{item}}
                    </li>
                </ul>
            </div>
        </transition>
    </div>
</template>

<script>
import { ALL_PLACES } from "common/js/place";
export default {
  props: {
    addr: {
      type: String,
      default: ""
    },
    splitIcon: {
      type: String,
      default: "-"
    }
  },
  data() {
    return {
      provinces: ALL_PLACES,
      citys: [],
      countys: [],
      nowPIndex: -1,
      nowCIndex: -1,
      nowCountyIndex: -1,
      isDrop: false,
      selectAddr: this.addr
    };
  },
  beforeMount() {
    if (this.selectAddr.length > 0) {
      let addrs = this.selectAddr.split(this.splitIcon);
      this.provinces.forEach((item, index) => {
        if (addrs[0] === item.name) {
          this.nowPIndex = index;
          this.citys = item.city;
        }
      });
      this.citys.forEach((item, index) => {
        if (addrs[1] === item.name) {
          this.nowCIndex = index;
          this.countys = item.area;
        }
      });
      this.countys.forEach((item, index) => {
        if (addrs[2] === item) {
          this.nowCountyIndex = index;
        }
      });
    }
  },
  watch: {
    selectAddr(newAddr) {
      this.$emit("on-change", newAddr);
    }
  },
  methods: {
    toggleDrop() {
      this.isDrop = !this.isDrop;
    },
    selectProvince(item, index) {
      this.nowPIndex = index;
      this.provinces.map(ite => {
        if (ite.name == item.name) {
          this.citys = ite.city;
        }
      });

      this.selectAddr = item.name;

      this.nowCIndex = -1;
      this.countys = [];
    },
    selectCity(item, index) {
      this.nowCIndex = index;
      this.citys.map(ite => {
        if (ite.name == item.name) {
          this.countys = ite.area;
        }
      });

      this.selectAddr =
        this.selectAddr.indexOf(this.splitIcon) < 0
          ? this.selectAddr + this.splitIcon + item.name
          : this.selectAddr.slice(0, this.selectAddr.indexOf(this.splitIcon)) +
            this.splitIcon +
            item.name;

      this.nowCountyIndex = -1;
    },
    selectCounty(item, index) {
      this.nowCountyIndex = index;

      this.selectAddr =
        this.selectAddr.indexOf(this.splitIcon) !=
        this.selectAddr.lastIndexOf(this.splitIcon)
          ? this.selectAddr.slice(
              0,
              this.selectAddr.lastIndexOf(this.splitIcon) + 1
            ) + item
          : this.selectAddr + this.splitIcon + item;

      this.toggleDrop();
    }
  }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';

.cascader-component {
    width: 100%;
    position: relative;
    display: inline-block;

    .cascader-cover {
        position: absolute;
        width: 6000px;
        height: 6000px;
        top: -2000px;
        left: -2000px;
        z-index: 3;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.3);
    }

    .cascader-show {
        box-sizing: border-box;
        border: 1px solid #e3e3e3;
        padding: 0 20px 0 10px;
        display: inline-block;
        position: relative;
        cursor: pointer;
        height: 25px;
        line-height: 25px;
        border-radius: 3px;
        background: #fff;
        width: 100%;

        span {
            display: inline-block;
            width: 100%;
        }

        .arrow {
            position: absolute;
            display: inline-block;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 5px solid #aaaaaa;
            width: 0;
            height: 0;
            top: 45%;
            right: 8px;
            vertical-align: middle;
            z-index: 2;
        }
    }

    .cascader-list {
        overflow: hidden;
        display: inline-block;
        position: absolute;
        left: 0;
        top: 26px;
        width: 100%;
        z-index: 5;
        border-radius: 4px;
        overflow: hidden;

        ul {
            float: left;
            width: 33.3%;
            list-style: none;
            margin: 0;
            padding: 0;
            height: 300px;
            overflow-y: auto;
            background: #fff;
            overflow-x: hidden;

            li {
                background-color: #ffffff;
                cursor: pointer;

                &.active {
                    background-color: #4fc08d;
                    color: #fff;
                }
            }
        }
    }
}

.fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
    opacity: 0;
}
</style>
